<!--
 * @Date: 2023-05-18 15:41:43
 * @LastEditTime: 2023-09-22 15:01:52
 * @FilePath: /wkw/src/views/capitalControl/index.vue
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('zi-jing-guan-li')"
  }
}
</route>
<script lang="ts" setup>
import {
  apiUnlockGetLogs,
  ApiUnlockGetLogs,
  apiCommunityGetLogs,
  ApiCommunityGetLogs,
  apiBuyCoinGetLogs,
  ApiBuyCoinGetLogs,
  apiLiquidityGetLogs,
  ApiLiquidityGetLogs,
} from "@@/api/transaction/list";
import { fixedDecimals, omitText } from "@@/utils/tools/format";
import dayjs from "dayjs";
import useBalanceStore from "@@/store/useBalanceStore";

const balanceStore = useBalanceStore();
const WKC = computed(() => balanceStore.getCoinByCode("WKC"));
balanceStore.findGameBalance(WKC.value);

const { t } = useI18n();
const tabs = computed(() => [
  {
    title: t("jie-suo"),
    api: apiUnlockGetLogs,
  },
  {
    title: t("tuan-dui"),
    api: apiCommunityGetLogs,
  },
]);
const tabs1 = computed(() => [
  {
    title: t("gou-bi-jiang-li"),
    api: apiBuyCoinGetLogs,
  },
]);
const tabs2 = computed(() => [
  {
    title: t("liu-dong-xing"),
    api: apiLiquidityGetLogs,
  },
]);
interface Solt {
  index: number;
  item: ApiUnlockGetLogs.DataItem | ApiCommunityGetLogs.DataItem;
}
interface Solt1 {
  index: number;
  item: ApiBuyCoinGetLogs.DataItem;
}
interface Solt2 {
  index: number;
  item: ApiLiquidityGetLogs.DataItem;
}
</script>
<template>
  <CpageView>
    <Ccell
       
      @click="$router.push({ name: 'withdrawalCoin' })"
      active
      show-right-icon
    >
      <Rimage size="40rem" :src="WKC?.logo" />
      <div class="T-S-sm">{{ WKC?.code }}</div>

      <template #center>
        <div>{{ fixedDecimals(WKC?.gameBalance, 4) }}</div>
      </template>
      <template #right>
        {{ $t("qu-ti-bi") }}
      </template>
    </Ccell>

    <Rtabs class="MT-md">
      <VanTab :title="tab.title" v-for="(tab, index) in tabs" :key="index">
        <CrequestList :api="tab.api">
          <template #item="{ item }: Solt">
            <Ccard class="T-S-sm" :key="item.id">
              <div class="flex-J-SB flex-A-C">
                <div>{{ $t("chan-sheng-zhe") }}</div>
                <CcopyText :copy-text="item.produce.address">
                  {{ omitText(item.produce.address) }}
                </CcopyText>
              </div>
              <VanDivider class="MT-sm MB-sm" />
              <Cgrid col="auto 1fr auto">
                <div class="flex-A-C">
                  <Rimage size="60rem" :src="item.coin.logo" />
                  <span class="ML-xs">{{ item.coin.code }}</span>
                </div>
                <div class="C-B1">
                  <VanTag color="var(--C-M1)" round>
                    {{ fixedDecimals(item.money) }}
                  </VanTag>
                </div>
                <div>{{ dayjs(item.created_at).format("MM/DD HH:mm:ss") }}</div>
              </Cgrid>
            </Ccard>
          </template>
        </CrequestList>
      </VanTab>
      <VanTab :title="tab.title" v-for="(tab, index) in tabs2" :key="index">
        <CrequestList :api="tab.api">
          <template #item="{ item }: Solt2">
            <Ccard class="T-S-sm" :key="item.id">
              <div class="flex-J-SB">
                <div>{{ $t("zhan-bi") }}</div>
                <div>{{ fixedDecimals(Number(item.rate) * 100, 2) }}%</div>
              </div>
              <VanDivider class="MT-sm MB-sm" />
              <Cgrid col="auto 1fr auto">
                <div class="flex-A-C">
                  <Rimage size="60rem" :src="item.coin.logo" />
                  <span class="ML-xs">{{ item.coin.code }}</span>
                </div>
                <div class="C-B1">
                  <VanTag color="var(--C-M1)" round>
                    {{ fixedDecimals(item.number) }}
                  </VanTag>
                </div>
                <div>{{ dayjs(item.created_at).format("MM/DD HH:mm:ss") }}</div>
              </Cgrid>
            </Ccard>
          </template>
        </CrequestList>
      </VanTab>
      <VanTab :title="tab.title" v-for="(tab, index) in tabs1" :key="index">
        <CrequestList :api="tab.api">
          <template #item="{ item }: Solt1">
            <Ccard class="T-S-sm" :key="item.id">
              <div class="flex-J-SB">
                <div>{{ $t("ha-xi") }}</div>
                <CcopyText :copy-text="item.swap.txid">
                  {{ omitText(item.swap.txid) }}
                </CcopyText>
              </div>
              <VanDivider class="MT-sm MB-sm" />
              <Cgrid col="auto 1fr auto">
                <div class="flex-A-C">
                  <Rimage size="60rem" :src="item.coin.logo" />
                  <span class="ML-xs">{{ item.coin.code }}</span>
                </div>
                <div class="C-B1">
                  <VanTag color="var(--C-M1)" round>
                    {{ fixedDecimals(item.money) }}
                  </VanTag>
                </div>
                <div>{{ dayjs(item.created_at).format("MM/DD HH:mm:ss") }}</div>
              </Cgrid>
            </Ccard>
          </template>
        </CrequestList>
      </VanTab>
    </Rtabs>
  </CpageView>
</template>
<style lang="scss" scoped></style>
